<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
	<button id="load"> load data</button> <br>
	 <!-- 下面是内容展示的区域 -->
	  <div id="popDiv">
		   <table id="contentTable" bgcolor="#FFFAFA" border="0" cellpadding="0" cellspacing="0">
			    <tbody id="content_table_body">
			    <!-- 这个是动态查询出来的数据显示的地方 -->
			    
			    
			    </tbody>
			   </table>
		  </div>
	 </div>
	

	<script type="text/javascript">
		$(function(){
			//从json server 加载数据
			$("#load").on("click", function(){
				$.get("http://localhost:3000/users", function(data){
					var table = $("#content_table_body");
					for (var i = 0; i < data.length; i++) {
						console.log(data[i].name);
						 var tr = $("<tr></tr>");
						 tr.append("<td></td>").text(data[i].name);
						 var delBtn = $("<button id="+data[i].id+">delete</button>");
						 delBtn.index = i; //记录是第几个button
						 tr.append(delBtn);
						 table.append(tr);
					};

					//删除数据
					$("button").on("click", function(e){
						var id = e.target.id;
						$.ajax({

								type:"DELETE",
								dataType:"json",
								url:"http://localhost:3000/users/"+id
							}).done(function(msg){
								
							});
							$(this).parent().empty();
					});
				});

				
			});



		});

	</script>
</body>
</html>